{% include 'header.html' %}
<div class="cont">
{% include 'nav.html' %}
<div style="height: 40px;">
    <a href="#" onClick="javascript :history.back(-1);" style="padding-left: 10px;padding-top: 10px;font-size: 18px;">返回</a>
</div>

<hr style="height:1px;border:none;border-top:1px solid darkgray;" />
    {% block body %}
        <!-- contents -->
        <div class="ui-container">
            <section class="t-item ui-border-b" style="position: relative;">
                <article>
                    <!-- user -->
                            <section class="new_user">
                                <div class="ui-row-flex list-user-author">
                                    <div class="ui-avatar item-user" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                                        <img src="{{ dst[0].header }}"
                                        data-url="{{ dst[0].header }}">
                                    </div>
                                    <div class="ui-list-info">
                                        <h4 class="ui-nowrap">{{ dst[0].name }}</h4>
                                    </div>
                                </div>
                            </section>
                            <!-- title -->
                            <section class="ui-row-flex">
                                <p>{{ dst[0].title }}</p>
                            </section>
                            <!-- content -->
                            {% if dst[0].type == 41 %}
                                <section class="j-v-c">
                                <div class="x-video-container j-video">
                                    <div class="x-video-p" style="padding-top: {{ padtop }}%">
                                        <video id="{{ dst[0].id }}" data-id="{{ dst[0].id }}"
                                               class="topic-xx-video x-video j-player" width="100%"
                                               poster="{{ dst[0].video_img }}" webkit-playsinline="" playsinline=""
                                               x-webkit-airplay="true" controls="" preload="none">
                                            <source src="{{ dst[0].video_uri }}" type="video/mp4">
                                        </video>
                                        <div class="loading">
                                            <div style="position: relative; width: 100%; height: 100%">
                                                <i class="x-icon-loading" style="color: #fff;position: absolute;top: 50%;left: 50%"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </section>
                            {% elif dst[0].type == 10 %}
                                <section class="ui-placehold ui-placehold-img topic-img">
                                <img src="{{ dst[0].image }}"
                                     class="j-imglazyload"
                                     data-url="{{ dst[0].image }}">
                            </section>
                            {% endif %}

                            <!--tool bar-->
                            <div class="ui-row-flex item-tool">
                                <ul class="ui-tiled" data-tid="0000" data-playcount="0" data-playfcount="0">
                                    <li class="tool-button">
                                        <a class="ui-border-r tool-praise" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                                            <i class="ui-icon-praise"></i>
                                            <span>{{ dst[0].love }}</span>
                                        </a>
                                    </li>
                                    <li class="tool-button">
                                        <a class="ui-border-r tool-cai" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                                            <i class="ui-icon-cai"></i>
                                            <span>{{ dst[0].hate }}</span>
                                        </a>
                                    </li>
                                    <li class="tool-button j-ga" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                                        <a class="ui-border-r  tool-forward" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                                            <i class="ui-icon-f"></i>
                                            <span>{{ dst[0].forward }}</span>
                                        </a>
                                    </li>
                                    <li class="tool-button">
                                        <a class="tool-comments" href="/{{ dst[0].id }}.html" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                                            <i class="ui-icon-comments"></i>
                                            <span>74</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                </article>
            </section>
            <!-- JiaThis Button BEGIN -->
            <div class="jiathis_style_m" style="padding-left: 50px"></div>
            <script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_m.js" charset="utf-8"></script>
            <!-- JiaThis Button END -->
            <!--comments-->
            <section class="hot" style="padding-top: 40px">
                <div id="articleHotComments">
                    <div class="item-divider">
                        <span style="font-size: 14px">评论</span>
                    </div>
                </div>
                <ul id="ulHotComments" class="ui-list ui-list-pure hot-comment ">
                {% if cmt %}
                    {% for i in cmt %}
                    <li class="ui-border-b">
                        <div class="ui-list-thumb user-logo-click" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                            <div class="ui-avatar">
                                <span style="background-image: url('{{ i.header }}')"></span>
                            </div>
                        </div>
                        <div class="ui-list-info">
                            <div class="comment-content">
                                <p class="user-name">{{ i.name }}</p>
                                <div class="ui-row-flex" data-cid="{{ i.cid }}">
                                    <div class="ui-col ui-col-3">{{ i.body }}</div>
                                    <div class="ui-col tool-user-praise" style="position: relative; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                                        <i class="ui-icon-praise"></i>
                                        <span>{{ i.like_count }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    {% endfor %}
                {% else %}
                    <a>暂无评论</a>
                {% endif %}
                </ul>
            </section>

        </div>

    {% endblock body %}
{% include 'footer.html' %}
</div>

